<template>
    <div class="page-container">
      <div class="banner full relative">
        <img src="@/assets/images/banner-2.jpg" class="full" alt="" />
        <h2 class="title">研究团队</h2>
      </div>
      <div class="section team page-content">
        <div class="types">
          <div class="type-title">
            研究团队
            <img src="/src/assets/images/border/top2.png" alt="">
          </div>
          <div class="type-list">
            <p v-for="item in types" :key="item.key" :class="{active: activeType === item.key}" @click="changeType(item.key)">{{item.label}}</p>
          </div>
        </div>

        <div class="team-group">
          <div class="team-type flex">
            <img src="/src/assets/images/border/top3.png" style="height: 32px; margin-right: 8px;" alt="">
            {{activeTypeStr}}
          </div>

          <div class="team-list">
            <TeamItem v-for="item in testList" :key="item.id" :detail="item" @click="teamDetail(item)" />
          </div>
        </div>
      </div>

    </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
import TeamItem from './TeamItem.vue'
import {useRouter} from "vue-router";
const router = useRouter()

const types = [{ label: '正高级', key: '正高级' }, { label: '副高级', key: '副高级' }, { label: '中级', key: '中级' }]
const temItemTes = { name: '姓名', position: '研究员', desc: '中国科学院生物物理研究所研究员，中国科学院核酸生物学重点实验室学术委员会主任。'}
const testList = []
for (let i = 0; i < 5; i++) {
  testList.push({id: Math.random(), ...temItemTes})
}

const activeType = ref(types[0].key)
const activeTypeStr = computed(() => types.find(item => item.key === activeType.value)?.label)
function changeType(type) {
  activeType.value = type
}

function teamDetail(info) {
  router.push('team/detail?id=' + info.id)
}
</script>

<style lang='scss' scoped>
.page-container {
  background-color: #1E2735;
}
.banner {
  line-height: 0;
  .title {
    font-size: 32px;
    color: white;
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
  }
}
.team {
  color: white;
  display: flex;
  padding-top: 48px;
}

p {
  color: white;
  font-size: 18px;
  line-height: 36px;
}

.types {
  width: 240px;
  margin-right: 76px;
  min-height: calc(100vh - 288px);
  background-color: #0E387940;
  border: 1px solid #185ECA;

  .type-title {
    width: 100%;
    color: white;
    font-size: 14px;
    height: 36px;
    display: flex;
    padding-left: 24px;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    background-color: #185ECA;
    img {
      left: -1px;
      top: -8px;
      height: 8px;
      position: absolute;
    }
  }
  .type-list {
    p {
      cursor: pointer;
      margin: 0;
      font-size: 18px;
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      padding-left: 24px;
      box-sizing: border-box;
      position: relative;

      &:hover {
        color: #36CDFD;
      }

      &.active {
        color: #36CDFD;

        &:after {
          right: 0;
          content: '';
          height: 40px;
          border: 4px solid transparent;
          position: absolute;
          border-right-color: #36CDFD;
        }
      }
      &:before {
        top: 0;
        content: '';
        width: 90%;
        position: absolute;
        border-top: 1px solid #ffffff20;
      }
    }
  }
}

.team-list {
  width: 884px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .team-item {
    width: 404px;
    height: 240px;
    cursor: pointer;
  }
}
</style>